<template>
	<view :style="{ '--color': color }">
		<view class="navBar" :style="{ height: `${totalHeight}px` }">
			<view class="titleBar" :style="{ height: `${navHeight}px`, width: `${navWidth}px` }">
				<view class="iconfont icon-xiangzuo white size34 BackIfont" @click="$back()"></view>
				<text class="Title ellipsis">自购明细</text>
			</view>
		</view>
		<view class="Topbox" :style="{'padding-top':`${totalHeight}px`}">
			<view class="row j-centert white size36 bold">{{ date[current].year }}</view>
			<view class="boxDate">
				<view class="iconfont icon-xiangzuo dateIcon" :class="{ opacity05: Left }" @click="changMonth(1)">
				</view>
				<swiper :indicator-dots="false" :current="current" :autoplay="false" class="swiper"
					display-multiple-items="3" :disable-touch="true" @change="SwiperChange">
					<swiper-item class="swiper-item"></swiper-item>
					<swiper-item class="swiper-item" v-for="(item, index) in date" :key="index"
						:class="{ Active: current == index }" @click="current = index">
						{{ item.name }}
					</swiper-item>
					<swiper-item class="swiper-item"></swiper-item>
				</swiper>
				<view class="iconfont icon-xiangyouxiayiye dateIcon" :class="{ opacity05: Rigth }"
					@click="changMonth(2)"></view>
			</view>

			<view class="row j-centert white size30 m-top20">总自购：{{ allData.total_count }}</view>
			<view class="row j-centert white h6 m-top20">本月自购：{{ allData.month_count }}</view>
		</view>

		<view class="list" v-for="(item,index) in pageData" :key="index" @click="toDetail(item.order_id)">
			<view class="flex-1 d-flex f-column">
				<text class="list_txt">订单号：{{item.order_code}}</text>
				<text class="list_txt">订单金额：￥{{item.total_money}}</text>
				<text class="list_txt">购买时间：{{item.buyer_addtime}}</text>
			</view>
			<view class="iconfont icon-a-zujian32 color_cc size26"></view>
		</view>


		<emptys title="暂无当前内容" v-if="!pageData.length"></emptys>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				Year: 2024,
				date: [],
				current: 6,
				down_v_id: '',
				limit: 20,
				page: 1,
				pageData: [],
				allData: '',
				getMore: true,
			}
		},
		onLoad(opt) {
			if (opt.down_v_id) this.down_v_id = opt.down_v_id
			const Year = new Date().getFullYear()
			const Month = new Date().getMonth() + 1
			for (let i = 0; i < Month; i++) {
				let stringMonth = String(i + 1)
				this.date.push({
					year: Year,
					month: stringMonth.padStart(2, '0'),
					name: `${stringMonth}月`
				})
			}
			this.current = this.date.length - 1
			this.new_query_income_list()
		},
		methods: {
			new_query_income_list() {
				this.$http.get({
					url: '/zzj_singleSaleApi/new_query_income_list',
					data: {
						down_v_id: this.down_v_id,
						page: this.page,
						limit: this.limit,
						thisY: this.date[this.current].year,
						thisM: this.date[this.current].month,
						mine: 1
					}
				}).then((res) => {
					if (res.errcode != '100') return this.$Toast(res.msg)
					this.allData = res
					const result = res.data || []
					this.page == 1 ? this.pageData = result : this.pageData = [...this.pageData, ...result]
					if (result.length < this.limit) this.getMore = !this.getMore
				})
			},
			toDetail(order_id) {
				this.toUrl(`/orderPage/order/orderDetail?order_id=${order_id}`)
			},
			changMonth(Val) {
				if (this.current == 0 && Val == 1) return
				if (this.current == this.date.length - 1 && Val == 2) return
				Val == 1 ? this.current-- : this.current++
			},
			SwiperChange(e) {
				this.current = e.detail.current
				this.page = 1
				this.getMore = true
				this.new_query_income_list()
			}
		},
		computed: {
			...mapState(['color', 'System', 'navHeight', 'totalHeight', 'navWidth']),
			Left() {
				return this.current == 0 ? true : false
			},
			Rigth() {
				return this.current == this.date.length - 1 ? true : false
			}
		},
		onReachBottom() {
			if (!this.getMore) return
			this.page++
			this.new_query_income_list()
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.navBar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background-color: var(--color);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.titleBar {
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.BackIfont {
		padding: 20rpx;
	}

	.Title {
		flex: 1;
		color: #ffffff;
		font-size: 30rpx;
	}

	.Topbox {
		width: 100%;
		// height: 420rpx;
		background-color: var(--color);
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.boxDate {
		width: 100%;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: rgba(255, 255, 255, 0.4);
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
	}

	.dateIcon {
		color: #fff;
		font-size: 30rpx;
		padding: 20rpx;
	}

	.swiper {
		flex: 1;
		height: 100%;
	}

	.swiper-item {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
	}

	.Active {
		font-size: 36rpx;
	}

	.list {
		width: 710rpx;
		margin: 0 auto;
		padding: 24rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f1f1f1;
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		border-radius: 10rpx;
		box-shadow: rgba(241, 241, 241, 0.1) 0px 6rpx 20rpx;
	}

	.list_txt {
		color: #333;
		font-size: 26rpx;
		padding: 6rpx 0;
	}
</style>